<template>
  <div id="teacherStudent">
    <upload></upload>
    <el-divider></el-divider>
    <show-table :tableList="tableList"></show-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="page.total"
      @current-change="currentChange"
      :current-page.sync="page.currentPage"
      style="display: inline-block;"
    >
    </el-pagination>
  </div>
</template>

<script>
import Upload from "./child/upload.vue";
import ShowTable from "@/components/common/showTable.vue";
import { getAccounts } from "@/network/index.js";

export default {
  name: "TeacherStudent",
  components: {
    Upload,
    ShowTable,
  },
  data() {
    return {
      page: {
        total: 0,
        currentPage: 1,
      },
      tableList: [],
    };
  },
  methods: {
    currentChange() {
      this.changeAccounts(this.page.currentPage);
    },
    changeAccounts(pageNum) {
      let token = this.$store.getters.getToken;
      getAccounts(token, pageNum)
      .then((res) => {
        if (res.data.code >= 200 && res.data.code < 300) {
          this.tableList = res.data.data.records;
          this.page.total = res.data.data.total;
        } else throw new Error(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
    },
  },
  created: function() {
    this.changeAccounts(1);
  },
};
</script>

<style></style>
